<template>
	<view class="home">
		<uni-search-bar @confirm="doSearch" @input="" v-model="searchkey" />
		<MySwiper :pics="foodsPics" :sheight="sh" :indicatorColor="colors[0]" :indicatorActiveColor="colors[1]">
		</MySwiper>
		<!-- 接口实现 -->
		<!-- <swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in bannerGoodsList" :key="index">
				<view class="swiper-item">
					<image style="width: 100%;" :src="item.goods_big_logo" mode=""></image>
				</view>
			</swiper-item>
		</swiper> -->
		<!-- 图标分类 -->
		<view class="cate">
			<view class="cate-item" @tap="tocate(item.id)" v-for="(item,index) in classification">
				<image class="cate-img" :src="item.img" mode="widthFix"></image>
				<view class="cate-name">{{item.name}}</view>
			</view>
		</view>

		<!-- 精选商品列表 -->
		<view class="showGoods">
			<view class="title">
				精选蔬菜
			</view>
			<!-- 文字标题 -->
			<view class="tab">
				<view :class="{active:index==tabIndex}" v-for="(item,index) in foodsList">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="item,index in selectedList" :key="index" @tap="nav(item.id)">
				<view class="img">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="content">
					<view class="name">{{item.remark}}</view>
					<view class="info">
						<text>￥{{item.price}}元</text>
						<text class="tag">精选</text>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import MySwiper from "/components/MySwiper.vue";
	const foodsPics = ref([
		"/static/image/index1.jpg",
		"/static/image/index2.jpg",
		"/static/image/index3.jpg",
		"/static/image/index4.jpg",
		"/static/image/index5.jpg",
	])
	let colors = ref(['#000', '#0a0'])
	let sh = ref(200)
	const foodsList = ref([{
			name: '上新',
		},
		{
			name: '水果',
		},
		{
			name: '蔬菜',
		},
		{
			name: '禽畜牧蛋肉',
		},
		{
			name: '水产',
		}
	])
	let tabIndex = ref(0)
	// 图标
	const classification = ref([{
			img: "/static/image/vegetable.png"
		},
		{
			img: "/static/image/fruit.png"
		},
		{
			img: "/static/image/fungus.png"
		},
		{
			img: "/static/image/meat.png"
		},
		{
			img: "/static/image/aquatic.png"
		}
	])

	async function getCateInfo() {
		const data = await uni.$get('/list/goodTypeList')
		for (let i = 0; i < classification.value.length; i++) {
			classification.value[i]['name'] = data.data[i]['name']
			classification.value[i]['id'] = data.data[i]['id']
		}
	}


	let cateIndex = ref(0)
	let searchkey = ref("")
	// 商品
	let selectedList = ref([])
	// 轮播图
	function doSearch() {
		uni.showToast({
			icon: "none",
			title: searchkey.value
		})
	}
	//一级分类列表
	async function getGoodList() {
		const data = await uni.$get("/list/goodList"
			// +"?type=1&maxPrice=200&minPrice=0"
		)
		selectedList.value = data.data
		console.log(selectedList.value)
		return data
	}
	// 点击后跳转详情页面
	function nav(id) {
		console.log("点击了:" + id)
		uni.navigateTo({
			url: "/pages/indexDetails/indexDetails?id=" + id
		})
	}

	function tocate(id) {
		uni.setStorageSync("cateid", id)
		uni.switchTab({
			url: "/pages/category/category"
		})
	}
	onLoad(() => {
		getCateInfo()
		getGoodList()
	})
</script>

<style>
	.cate {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		margin: 10rpx 0 10rpx 0;
	}

	.cate>image {
		width: 130rpx;
		height: 130rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 20rpx;
	}

	.cate>.cate-item {
		width: 130rpx;
		height: 130rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 20rpx;

	}

	.cate>.cate-item>image {
		width: 60rpx;
		height: 60rpx;
		margin-top: 20rpx;
	}

	.list {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		background-color: gainsboro;
	}

	.list>.item {
		margin-top: 10rpx;
		width: 350rpx;
		height: 560rpx;
		border: 1rpx;
		border-radius: 10rpx;
		box-shadow: 3px 3px 3px #eee;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		background-color: white;
	}

	.list>.item>.img {
		width: 330rpx;
		height: 330rpx;
		border: 1rpx solid darkgray;
		border-radius: 10rpx;
	}

	.list>.item>.img>image {
		width: 100%;
		height: 100%;
	}

	.content>.name {
		width: 330rpx;
		color: gray;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.title {
		text-align: center;
		color: orange;
		border: 1px solid #ccc;
		border-radius: 5rpx;
		box-shadow: 3px 3px 3px #eee;
		margin: 10rpx;
		padding: 10rpx;
	}

	.info {
		position: relative;
		color: red;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.info .tag {
		position: absolute;
		right: 20rpx;
		width: fit-content;
		height: fit-content;
		padding: 3rpx;
		border: 1px solid red;
		border-radius: 5rpx;
		background-color: orangered;
		color: white;
		margin-left: 50rpx;
	}

	.tab {
		display: flex;
		justify-content: space-around;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}
</style>